<template>
  <el-card class="page-card">
    <div class="page-header">
      <h2>待审核商户列表</h2>
    </div>

    <div class="table-container">
      <el-table :data="pendingList" style="width: 100%">
        <el-table-column prop="userId" label="用户ID" width="120" />
        <el-table-column prop="shopName" label="店铺名称" />
        <el-table-column prop="businessLicense" label="营业执照URL" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="goToAudit(row.userId)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="empty-container">
      <el-empty v-if="pendingList.length === 0" description="暂无待审核商户" />
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getPendingMerchants } from '@/api/merchant'

const router = useRouter()
const pendingList = ref([])

onMounted(async () => {
  try {
    const res = await getPendingMerchants()
    pendingList.value = res.data.data || []
  } catch (error) {
    console.error('加载待审核商户失败:', error)
  }
})

function goToAudit(userId) {
  router.push({ path: '/admin/merchant-audit', query: { userId } })
}
</script>

<style scoped>
.page-card {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.page-header {
  margin-bottom: 20px;
}
.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.table-container {
  flex: 1;
  overflow: auto;
}
.empty-container {
  margin-top: 20px;
  text-align: center;
}
</style>
